<template>
  <div class="container">
    <div class="circle-ring-chart" ref="chartContainer"></div>
    <div class="desc">
      <div class="num">27,825,573</div>
      <div class="unit">当日周转数(次)</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'CircleRingChart',
  props: {
    value: {
      type: Number,
      default: 122,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener('resize', this.resizeChart);
  },
  methods: {
    initChart() {
      if (!this.$refs.chartContainer) return;
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChart();
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },

    updateChart() {
      if (!this.chart) return;
      let point = 260;
      let total = 300;
      let option = {
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: [
              {
                value: 80,
                itemStyle: {
                  normal: {
                    borderRadius: 0,
                    color: '#e9e9e9',
                  },
                },
              },
              {
                value: 20,
                itemStyle: {
                  normal: {
                    color: 'rgba(255,255,255,0)',
                  },
                },
              },
            ],
            startAngle: -127,
            minAngle: 0,
            label: {
              show: false,
              position: 'center',
            },
          },
          {
            type: 'pie',
            showEmptyCircle: true,
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            center: ['50%', '50%'],
            data: [
              {
                value: (point / total) * 100 * 0.8,
                itemStyle: {
                  normal: {
                    borderRadius: 0,
                    color: {
                      type: 'linear',
                      colorStops: [
                        {
                          offset: 0,
                          color: '#12a0fd',
                        },
                        {
                          offset: 1,
                          color: '#01b8b2',
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: ((total - point) / total) * 100 * 0.8,
                itemStyle: {
                  normal: {
                    color: '#1e2f59',
                  },
                },
              },
              {
                value: 20,
                itemStyle: {
                  normal: {
                    color: 'rgba(255,255,255,0)',
                  },
                },
              },
            ],
            startAngle: -127,
            label: {
              show: false,
            },
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
  watch: {
    value: {
      handler: 'updateChart',
      immediate: false,
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  margin-top: -0.1563rem;

  .desc {
    font-size: 0.1042rem;
    width: 100%;
    color: #fff;
    margin-top: -0.1042rem;
    display: flex;
    height: 0.4167rem;
    flex-direction: column;
    align-items: center;
    .num {
      font-family: DIN;
      font-weight: bold;
      font-size: 0.1563rem;
      color: #26f7ff;
    }
    .unit {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 0.1042rem;
      color: #f3ffff;
      line-height: 0.1563rem;
    }
  }
}

.circle-ring-chart {
  padding-top: 0.0521rem;
  width: 100%;
  height: 1.0938rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  &::before {
    content: '';
    position: absolute;
    width: 0.3125rem;
    height: 0.3125rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('~@/assets/fy/card.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    pointer-events: none;
  }
}
</style>
